import React from 'react';
import { connect } from 'umi';
import { Space, Card, Button } from 'antd';
import { TOKEN_KEY, getCookie } from '@/utils/cookie';
import UploadInput from '@/components/UploadInput';

import './card.less';

const GraphicChange = ({ dispatch }) => {
  // const [avatar, setAvatar] = useState(null);

  const upAvatar = () => {
    dispatch({
      type: 'smManInforRule/upAvatar',
      payload: {
        Authentication: getCookie(TOKEN_KEY),
        // avatar
      },
    });
  };

  return (
    <div className="site-card-border-less-wrapper">
      <Card bordered={false} id="Card">
        <Space direction="vertical">
          <div
            style={{
              display: 'flex',
              fontSize: 10,
              justifyContent: 'space-between',
              width: '100%',
            }}
          >
            <div style={{ color: 'rgba(0, 0, 0, 0.45)', textAlign: 'left', width: '50%' }}>
              <UploadInput type="image" />
            </div>
          </div>
          <div style={{ color: 'rgb(255, 0, 0)', margin: '10px 0', textAlign: 'left' }}>
            <p>注意：该图片将作为本机构在天府法务“入驻机构”</p>
            <p>板块展示时使用的机构图片。</p>
          </div>

          <div />
          <Button
            type="primary"
            block
            id="button"
            onClick={() => {
              upAvatar();
            }}
          >
            确认
          </Button>
        </Space>
      </Card>
    </div>
  );
};
export default connect(({ loading }) => ({
  loading: loading.models.smManInforRule,
}))(GraphicChange);
